<template>
  <div class="app-container">
    <el-form ref="queryForm" :model="searchs" :inline="true" label-width="68px" @submit.native.prevent>
      <el-button
        type="primary"
        icon="el-icon-plus"
        style="margin-right: 10px;"
        size="mini"
        @click="handleAdd"
      >新增
      </el-button>
      <el-form-item size="mini" label="" prop="cflastname">
        <el-input
          v-model="searchs.cflastname"
          placeholder="请输入项目名称"
          clearable
          style="width: 160px"
          @keyup.enter.native="fetchPro"
        />
      </el-form-item>
      <el-form-item size="mini">
        <el-button type="primary" icon="el-icon-search" size="mini" @click="fetchPro">搜索</el-button>

      </el-form-item>
    </el-form>
    <el-main style="padding: 0 ; height: calc(100% - 50px)">
      <el-table
        height="calc(100vh - 250px)"
        v-loading="grid.loading"
        size="small"
        row-key="fid"
        :data="grid.data"
      >
        <el-table-column label="基础信息" align="center">
          <el-table-column
            label="项目编码"
            prop="fnumber"
            min-width="120"
          />
          <el-table-column
            label="项目名称"
            prop="cflastname"
            min-width="200"
          />
          <el-table-column
            label="所属部门"
            prop="deptName"
            min-width="150"
          />
          <el-table-column
            label="项目阶段"
            min-width="100"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.cfprojectstage | stageLabel }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="启用状态"
            min-width="100"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.fisenabled | yesOrNo }}</span>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="管理信息" align="center">
          <el-table-column
            label="项目总"
            prop="xmzName"
            min-width="150"
          />
          <el-table-column
            label="项目工程负责人"
            prop="principalNames"
            min-width="150"
          />
          <el-table-column label="项目经理" prop="xmjlName" min-width="150" />
          <el-table-column
            label="是否停工"
            align="center"
            min-width="100"
          >
            <template slot-scope="scope">
              <el-tag v-if="scope.row.isLockout == 1" type="danger">停工</el-tag>
              <el-tag v-else type="success">正常</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            label="停工日期"
            prop="lockoutDate"
            min-width="150"
          />
        </el-table-column>
        <el-table-column
          label="操作"
          width="200"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-dropdown size="mini" @command="handleDropdownCommand($event, scope.row)" style="padding: 0 10px;">
              <span class="el-dropdown-link">
                修改数据<i class="el-icon-arrow-down el-icon--right" />
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="base" class="more-dropdown-item" icon="el-icon-edit">基础信息</el-dropdown-item>
                <el-dropdown-item command="set" class="more-dropdown-item" icon="el-icon-edit">管理信息</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>

            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click.stop="handleDelete(scope.row)"
            >删除
            </el-button>

          </template>
        </el-table-column>
      </el-table>
      <pagination
        style="height:40px;"
        :total="grid.total"
        :page.sync="grid.pageNum"
        :limit.sync="grid.pageSize"
        @pagination="fetchPro"
      />
    </el-main>
    <!-- 修改基础信息 -->
    <add-or-update
      :info="edit.baseInfo"
      :visible.sync="edit.baseFormVisible"
      @change="fetchPro"
    />
    <!-- 设置管理信息 -->
    <set-info-wd
      :info="edit.setInfo"
      :visible.sync="edit.setFormVisible"
      @change="fetchPro"
    />
  </div>
</template>

<script>
import { listPro, getById, remove } from '@/api/baseManage/project'
import AddOrUpdate from './components/AddOrUpdate'
import SetInfoWd from './components/setInfoWd.vue'

export default {
  name: 'Project',
  components: { AddOrUpdate, SetInfoWd },
  filters: {
    stageLabel(val) {
      const map = { 1: '在建', 2: '已竣工交付', 3: '已结算' }
      return map[val] || ''
    },
    yesOrNo(val) {
      const map = { 1: '是', 0: '否' }
      return map[val] || ''
    }
  },
  data() {
    return {
      // 检索项
      searchs: {
        clastname: ''
      },
      // 表格数据
      grid: {
        loading: false,
        data: [],
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      // 编辑
      edit: {
        baseFormVisible: false,
        baseInfo: {},
        setInfo: {},
        setFormVisible: false
      }

    }
  },
  watch: {
  },
  mounted() {
    this.fetchPro()
  },
  methods: {
    // 获取项目列表
    fetchPro() {
      const self = this
      const params = { ...this.searchs }
      params.pageNum = this.grid.pageNum
      params.pageSize = this.grid.pageSize
      this.grid.loading = true
      listPro(params).then(response => {
        if (response.code === 200) {
          self.grid.total = response.total
          self.grid.data = response.rows
        }
        self.grid.loading = false
      }).catch(() => {
        self.grid.loading = false
      })
    },
    // 添加项目
    handleAdd() {
      this.edit.baseInfo = {}
      this.edit.baseFormVisible = true
    },
    /**
     * 删除
     * @param row
     */
    handleDelete(row) {
      this.$confirm('是否确认删除操作的数据项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function() {
        return remove(row)
      }).then(() => {
        this.getData()
        this.msgSuccess('删除成功')
      }).catch(function() {
      })
    },
    // 修改数据
    handleDropdownCommand(command, data) {
      if (command === 'base') {
        this.openEditBaseInfo(data)
      }
      if (command === 'set') {
        this.openSetInfo(data)
      }
    },
    // 打开修改基础信息窗口
    openEditBaseInfo(data) {
      getById({ fid: data.fid }).then(response => {
        if (response.code === 200) {
          this.edit.baseInfo = response.data
          this.edit.baseFormVisible = true
        }
      })
    },
    openSetInfo(data) {
      this.edit.setInfo = data
      this.edit.setFormVisible = true
    }

  }
}
</script>

<style type="scss" scoped>
.el-dropdown-link {
  font-size: 12px;
  color: #409EFF;
}
.el-dropdown-link:hover {
  color: #61affd;
}
</style>
